import {
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu } from "antd";
import { useState } from "react";
import { Link } from "react-router-dom";

interface MenuItem {
  label: React.ReactNode;
  key: React.Key;
  icon?: React.ReactNode;
  children?: MenuItem[];
  type?: "group";
}

const items: MenuItem[] = [
  {
    label: <Link to="/home/homeindex">首页</Link>,
    icon: <AppstoreOutlined />,
    key: 0,
  },
  {
    label: "收货管理",
    key: 1,
    icon: <AppstoreOutlined />,
    children: [
      {
        label: <Link to="/home/ASN">ASN查询</Link>,
        key: 11,
      },
    ],
  },
  {
    label: "库存管理",
    key: 2,
    icon: <AppstoreOutlined />,
    children: [
      {
        label: <Link to="/home/inventoryQuery">库存查询</Link>,
        key: 21,
      },
      {
        label: <Link to="/home/inventoryRecord">库存动销记录</Link>,
        key: 22,
      },
    ],
  },
  {
    label: "出库管理",
    key: 3,
    icon: <AppstoreOutlined />,
    children: [
      {
        label: <Link to="/home/outboundOrderQuery">出库单查询</Link>,
        key: 31,
      },
      {
        label: <Link to="/home/waveTimeQuery">波次查询</Link>,
        key: 32,
      },
      {
        label: <Link to="/home/inventoryRecord">包装复核</Link>,
        key: 33,
      },
      {
        label: <Link to="/home/outboundBoxQuery">出库箱查询</Link>,
        key: 34,
      },
      {
        label: <Link to="/home/taskManagement">任务管理</Link>,
        key: 35,
      },
      {
        label: <Link to="/home/loadDispatch">装载发运</Link>,
        key: 36,
      },
    ],
  },
  {
    label: "报表管理",
    key: 4,
    icon: <AppstoreOutlined />,
    children: [
      {
        label: <Link to="/home/reportCenter">报表中心</Link>,
        key: 41,
      },
    ],
  },
  {
    label: "基础资料",
    key: 6,
    icon: <AppstoreOutlined />,
    children: [
      {
        label: <Link to="/home/warehouseMasterDocument">仓库主文档</Link>,
        key: 61,
      },
      {
        label: <Link to="/home/carrierManagement">承运商管理</Link>,
        key: 62,
      },
    ],
  },
];
const rootSubmenuKeys = ["1", "2", "3", "4", "5", "6"];
const Aside = () => {
  const [openKeys, setOpenKeys] = useState(["sub1"]);

  const onOpenChange: MenuProps["onOpenChange"] = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };
  return (
    <div>
      <Menu
        mode="inline"
        openKeys={openKeys}
        onOpenChange={onOpenChange}
        style={{ width: 200 }}
        items={items}
        theme="dark"
      />
    </div>
  );
};
export default Aside;
